<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24" v-show="option_show">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入公司名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
          ·
        </div>
        <div class="head-container">
          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选
          </el-checkbox>
          <el-checkbox v-model="deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动
          </el-checkbox>


          <el-tree
            :data="deptOptions"
            show-checkbox
            :filter-node-method="filterNode"
            default-expand-all
            node-key="id"
            ref="dept"
            highlight-current
            :check-strictly="!deptCheckStrictly"
            :props="defaultProps"/>


        </div>
      </el-col>
      <el-col :span="mainwidth" :xs="24">


        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="50px">

          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.state"
              placeholder="状态"
              clearable
              size="small"
              style="width: 150px"
            >
              <el-option
                v-for="dict in applyState"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>

        </el-form>



        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: 10px">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-input
                v-model="queryParams.value"
                placeholder="查询值"
                clearable
                size="small"
                style="width: 350px"
                @keyup.enter.native="handleQuery"
              >
                <el-select
                  v-model="queryParams.type"
                  placeholder="查询条件"
                  clearable
                  slot="prepend"
                  style="width: 110px"
                >
                  <el-option
                    v-for="dict in typeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-input>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button size="mini" v-hasPermi="['yunze:card:listAgent']" @click="agentShow">公司所属</el-button>
            </el-col>
             <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                :loading="exportLoading"
                @click="handleExport"
                v-hasPermi="['yunze:cardRoute:exportData']"
              >导出
              </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" v-hasPermi="['yunze:cardRoute:list']" @queryTable="getList"
                           :columns="columns"></right-toolbar>
          </el-row>
        </el-form>




        <el-table v-loading="loading" :data="cardList" @selection-change="handleSelectionChange">
          <el-table-column label="流水号" align="center" key="a_no" prop="a_no" v-if="columns[0].visible" width="120"/>
          <el-table-column label="ICCID" align="center" key="iccid" prop="iccid" v-if="columns[1].visible" width="180"/>
          <el-table-column label="使用人姓名" key="u_name" prop="u_name" v-if="columns[2].visible"/>
          <el-table-column label="身份证号" key="id_number" prop="id_number" v-if="columns[3].visible"/>
          <el-table-column label="身份证地址" prop="id_address"  align="center" v-if="columns[4].visible" :show-overflow-tooltip="true" width="100"/>
          <el-table-column label="使用人电话" prop="telephone" v-if="columns[5].visible"/>
          <el-table-column label="创建时间" prop="create_time" v-if="columns[6].visible"/>
          <el-table-column label="审核时间" prop="review_time" v-if="columns[7].visible"/>
          <el-table-column label="状态" align="center" prop="state" v-if="columns[8].visible"
                           :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
              <span :class="scope.row.state=='0'?'myorange':scope.row.state=='1'?'mygreen':'mygred'">
              {{ tools.getDkeyValue(applyState, scope.row.state) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业" align="center" prop="dept_id" v-if="columns[9].visible"
                           :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
              {{ tools.getDeptNamekeyValue(DeptOptions, scope.row.dept_id) }}
            </template>
          </el-table-column>
          <el-table-column label="订购号码" prop="apply_telephone" v-if="columns[10].visible"/>
          <el-table-column label="审核建议" prop="audit_suggestion"  align="center" v-if="columns[11].visible" :show-overflow-tooltip="true" width="100"/>
          <el-table-column label="申请备注" align="center" prop="apply_remarks" v-if="columns[12].visible":show-overflow-tooltip="true" width="150"/>



          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['yunze:applyUseCard:list']"
              >修改</el-button>
            </template>
          </el-table-column>

        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>



    <el-dialog title="编辑" :visible.sync="open" width="950px" append-to-body>
      <el-form ref="form" :model="UpdInfo" label-width="80px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名:" >
              <el-input  v-model="form.u_name" readonly placeholder="使用人真实姓名" />
              <el-button type="primary" @click="cardCopy(form.u_name)" size="mini" >复制</el-button>
            </el-form-item>
          </el-col>


          <el-col :span="8">
            <el-form-item  label="电话:" >
              <el-input v-model="form.telephone" readonly placeholder="使用人电话" />
              <el-button type="primary" @click="cardCopy(form.telephone)" size="mini" >复制</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号:" >
              <el-input v-model="form.id_number" readonly placeholder="使用人身份证号" />
              <el-button type="primary" @click="cardCopy(form.id_number)" size="mini" >复制</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="ICCID:" >
              <el-input v-model="form.iccid" readonly placeholder="ICCID 卡板号码" />
              <el-button type="primary" @click="cardCopy(form.iccid)" size="mini" >复制</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证地址:"   >
              <el-input v-model="form.id_address"  placeholder="使用人身份证地址" />
              <el-button type="primary" @click="cardCopy(form.id_address)" size="mini" >复制</el-button>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请备注:" >
              <el-input type="textarea" v-model="form.apply_remarks" placeholder="申请备注（选填）" />
              <el-button type="primary" @click="cardCopy(form.apply_remarks)" size="mini" >复制</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="订购号码 :"  >
              <el-input v-model="form.apply_telephone" placeholder="订购号码"/>
              <el-button type="primary" @click="cardCopy(form.apply_telephone)" size="mini" >复制</el-button>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态" >
              <el-select
                v-model="form.state"
                placeholder="灵活变更状态"
                size="small"
                style="width: 150px"
              >
                <el-option
                  v-for="dict in applyState"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="审核建议 :" prop="remarks">
          <el-input v-model="form.audit_suggestion" type="textarea" placeholder="审核建议（审核不通过时给用户一个反馈）[选填]"></el-input>
          <el-button type="primary" @click="cardCopy(form.audit_suggestion)" size="mini" >复制</el-button>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updSub"  v-hasPermi="['yunze:applyUseCard:edit']" >修 改</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {
  getlist,
  edit, exportApplCards
} from "@/api/yunze/flowcard/applcard";
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import tools from "@/utils/yunze/tools";

export default {
  name: "applcard",

  data() {
    return {
      UpdInfo:{},



      //跳转
      link: "",
      //保存 编辑 按钮
      cardRouteAdd: false,
      cardRouteEdie: false,
      tools: tools,
      deptCheckStrictly: true,
      defaultProps: {
        children: "children",
        label: "label"
      },
      deptExpand: true,
      deptNodeAll: false,
      show_ds: false,//详情查看
      DeptOptions: [],// 公司信息
      mainwidth: 24,//宽度
      option_show: false, //公司所属查询
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 用户表格数据
      cardList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],


      postageVif: false,//控制树
      treeCol: 6,
      formCol: 18,
      postageExpand: true,
      postageNodeAll: false,
      postageCheckStrictly: true,


      // 表单参数
      form: {
        cd_addressurl: "",
        cd_useraccount: "",
        cd_password: "",
      },


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        value: null,

      },
      // 列信息
      columns: [
        {key: 0, label: `流水号`, visible: false},
        {key: 1, label: `ICCID`, visible: true},
        {key: 2, label: `使用人姓名`, visible: true},
        {key: 3, label: `身份证号`, visible: true},
        {key: 4, label: `身份证地址`, visible: true},
        {key: 5, label: `使用人电话`, visible: true},
        {key: 6, label: `创建时间`, visible: true},
        {key: 7, label: `审核时间`, visible: true},
        {key: 8, label: `状态`, visible: true},
        {key: 9, label: `所属企业`, visible: true},
        {key: 10, label: `订购号码`, visible: true},
        {key: 11, label: `审核建议`, visible: false},
        {key: 12, label: `申请备注`, visible: true},

      ],
      // 表单校验
      rules: {},
      showButton:false,
      typeOptions: [],

      applyState: [],


    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      //console.log(val);
      this.$refs.dept.filter(val);
    },
  },

  created() {
    let str = this.$route.params.Pstr;
    //加载 查询条件
    if (window['channel_selType'] != undefined && window['channel_selType'] != null && window['channel_selType'] != '') {
      this.typeOptions = window['channel_selType'];
    } else {
      this.getDicts("applycard_sel_type").then(response => {
        window['channel_selType'] = response.data;
        this.typeOptions = window['channel_selType'];
      });
    }



    //加载 企业名称
    if (window['DeptOptions'] != undefined && window['DeptOptions'] != null && window['DeptOptions'] != '') {
      this.DeptOptions = window['DeptOptions'];
    } else {
      this.getDeptName().then(response => {
        let jsonobj = JSON.parse(tools.Decrypt(response));
        window['DeptOptions'] = jsonobj.Data;
        this.DeptOptions = window['DeptOptions'];
      });
    }


    //加载
    if (window['applyState'] != undefined && window['applyState'] != null && window['applyState'] != '') {
      this.applyState = window['applyState'];
    } else {
      this.getDicts("yunze_card_applyState").then(response => {
        window['applyState'] = response.data;
        this.applyState = window['applyState'];
      });
    }

    this.getTreeselect();



    if (str != null && str != '' && str.length > 0) {
      var reg_1 = new RegExp("%2F", "g");
      var reg_2 = new RegExp(" ", "g");
      str = str.replace(reg_1, "/");//转义 /
      str = str.replace(reg_2, "+");//转义 [ ]  》 +
      let jsonobj = JSON.parse(tools.Decrypt(str));
      if (jsonobj != null) {
        if(tools.Is_null(jsonobj.state)){
          this.queryParams.state = ''+jsonobj.state;
          this.showSearch = true;
        }

      }

      this.getList();
    } else {
      this.getList();
    }






  },
  methods: {

    updSub(){

      let _this = this;
      if (tools.VerificationsText(_this, _this.form.id, "参数缺失，刷新后重试！") == true ) {
        let Pwd_Str = tools.encrypt(JSON.stringify(this.form));
        edit(Pwd_Str).then(response => {
          let jsonobj = JSON.parse(tools.Decrypt(response));
          if (jsonobj.code == 200) {
            this.msgSuccess(jsonobj.msg);
            this.open=false;
            this.getList();
          } else {
            this.msgError(jsonobj.msg);
          }
        })
      }



    },


    changePostageVif() {
      if (this.postageVif) {
        this.treeCol = 6;
        this.formCol = 18;
      } else {
        this.treeCol = 0;
        this.formCol = 24;
      }
    },




    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'dept') {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == 'dept') {
        //console.log(value);
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value, type) {
      if (type == 'menu') {
        this.menuCheckStrictly = value ? true : false;
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(false ? this.deptOptions : []);
        this.deptCheckStrictly = value ? true : false;

      }
    },


    /*获取查询参数*/
    getParams() {

      if (this.$refs.dept != undefined & this.$refs.dept != null & this.$refs.dept != 'undefined') {
        if (this.$refs.dept.getCheckedKeys().length > 0) {
          this.queryParams.dept_id = this.$refs.dept.getCheckedKeys();
        }
      }

    },


    /** 查询通道列表 */
    getList() {
      this.loading = true;
      this.getParams();
      this.queryParams.page = 1;
      let Pwd_Str = tools.encrypt(JSON.stringify(this.queryParams));
      getlist(Pwd_Str).then(response => {
          let jsonobj = JSON.parse(tools.Decrypt(response));
          if (jsonobj.code == 200) {
            this.cardList = jsonobj.Data.Data;
            this.total = jsonobj.Data.Pu.rowCount;
            this.loading = false;
          } else {
            this.loading = false;
            if (jsonobj.deptId == "100") {
              this.msgError(jsonobj.msg);
            } else {
              this.msgError("网络异常");
            }
          }

        }
      );
    },
    /*代理查询拓展*/
    agentShow() {
      let _this = this;
      _this.option_show = !_this.option_show;
      _this.mainwidth = _this.option_show ? 20 : 24;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      //console.log(data);
      this.getList();
    },

    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.selTime = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = row;
      this.form.state = ''+this.form.state;
      this.open =true;
    },




    /** 导出按钮操作 */
    handleExport() {
      this.getParams();
      let Pwd_Str = tools.encrypt(JSON.stringify(this.queryParams));
      exportApplCards(Pwd_Str).then(response => {
        let jsonobj = JSON.parse(tools.Decrypt(response));
        //console.log(jsonobj);
        if (jsonobj.code == 200) {
          this.msgSuccess(jsonobj.msg);
        } else {
          this.msgError(jsonobj.msg);
        }

      })

    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },


    cardCopy(copyText){
      //console.log(copyText)
      let _this = this;
      if(tools.VerificationsText(_this, copyText, "复制内容为空取消复制！") == true){
        if(copyText!='copyText'){
          tools.copyThat(copyText,_this);
        }else {
          tools.open(_this, "复制内容为空取消复制！")
        }
      }

    },

  }
};
</script>

<style scoped>

.el-table .cell {
  line-height: 17px;
  padding-left: 10px;
  padding-right: 0px;
}

.el-form-item {
  margin-bottom: 10px;
}

.my_checkbox__inner {
  border: 1px;
}

.mygreen {
  color: #39a73d;
}

.myorange {
  color: #ff9800;
}


.mygred {
  /*background:#e64242;*/
  color: #e64242;
  /* font-size: 18px;*/
}

</style>

